<template>
	<view class="pageBox">
		<!--领取红包明细-->
		
		<view class="flex align-center flex-direction justify-center padding-left padding-right top-box">
			<view class="flex align-center">
				<image :src="data.redenvelope.user_avatar" class="avatar"></image>
				<view class="nickname">{{data.redenvelope.user_nickname || ''}}的红包</view>
			</view>
			<view class="content">{{data.redenvelope.name || ''}}</view>
		</view>
		
		
		<view class="red-info">
			{{data.redenvelope.num || '0'}}个红包
		</view>
		
		<view class="list">
			<view class="list-item" v-for="(item, index) in data.list" :key="index">
				
				<image :src="item.user_avatar" class="user-avatar"></image>
				
				<view class="right-box">
					<view class="flex flex-direction">
						<view class="user-nickname">{{item.user_nickname||''}}</view>
						<view class="date">{{item.createtime||''}}</view>
					</view>
					
					<view class="money">{{item.money||'0'}}元</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
export default {
	components: {
		
	},
	data() {
		return {
			id:0,
			data:{},
		}
	},
	onLoad(options) {
		this.id = options.id;
		this.getData();
	},
	onShow(){
		
	},
	methods: {
		getData(){
			let that = this;
			
			uni.request({
				url: '/redenvelope/redenvelopeshow',
				data: {
					id: this.id
				},
				success: res => {
					res = res.res;
					if (res.code === 1) {
						that.data = res.data;
					}
				}
			});
		},
	}
}
</script>

<style scoped lang="scss">
.top-box{
	background-color: #fff;
	height: 200rpx;
	margin-bottom: 20rpx;
}	
	
.avatar{
	width: 50rpx;
	height: 50rpx;
	border-radius: 50%;
}

.nickname{
	margin-left: 24rpx;
	font-size: 30rpx;
	font-weight: 700;
}

.content{
	color: #b0b0b0;
	font-size: 24rpx;
	margin-top: 20rpx;
}

.red-info{
	width: 750rpx;
	height: 80rpx;
	display: flex;
	align-items: center;
	border-bottom: 2rpx solid #e6e6e6;
	padding-left: 30rpx;
	font-size: 24rpx;
	color: #b0b0b0;
	background-color: #fff;
}

.list{
	background-color: #fff;
	
	.list-item{
		padding: 30rpx 30rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	
	.user-avatar{
		width: 100rpx;
		height: 100rpx;
		border-radius: 16rpx;
		flex-shrink: 0;
		margin-right: 24rpx
	}
	
	.user-nickname{
		font-weight: 700;
		font-size: 28rpx;
		margin-bottom: 20rpx;
	}
	
	.date{
		font-size: 24rpx;
		color: #b0b0b0;
	}
	
	.money{
		font-weight: 700;
		font-size: 28rpx;
	}
	
	.right-box{
		border-bottom: 2rpx solid #e6e6e6;
		flex: 1;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
}
</style>